<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Login</title>

    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.4.1/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <link href="https://cdn.90so.net/layui/2.4.5/css/layui.css" th:href="@{/webjars/layui/css/layui.css}" rel="stylesheet">
    <link href="../../static/css/register.css" th:href="@{/css/register.css}" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js" th:src="@{/webjars/jquery/jquery.min.js}"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/twitter-bootstrap/3.4.1/js/bootstrap.min.js" th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/store.js/1.3.20/store.min.js" th:src="@{/webjars/store.js/store.min.js}"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/moment.js/2.24.0/moment.min.js" th:src="@{/webjars/momentjs/min/moment.min.js}"></script>
    <script type="text/javascript" src="https://cdn.90so.net/layui/2.4.5/layui.all.js" th:src="@{/webjars/layui/layui.all.js}"></script>
    <script type="text/javascript" src="../../static/js/common.js" th:src="@{/js/common.js}"></script>
    <script type="text/javascript" src="../../static/js/user.js" th:src="@{/js/user.js}"></script>
</head>

<body>
<div class="login" style="margin-top: 224px;">
    <div id="logo-div-id"></div>
    <div class="login-wrapper">
        <div class="login-box login-register">
            <div class="login-box-inner">
                <form id="login-form" action="#" method="post">
                    <p></p>
                    <div class="login-group">
                        <label for="login-username">用户名/邮箱</label>
                        <input id="login-username" type="text" class="login-input">
                    </div>
                    <div class="login-group">
                        <label for="login-password">密码 <a href="#" th:href="@{/v1/monitoring-system/users/page/forgot-password}" class="forgot-link">忘记密码?</a></label>
                        <input id="login-password" type="password" class="login-input">
                    </div>

                    <button id="login-btn" class="login-btn">
                        登录
                    </button>

                    <div class="text-foot" style="display: inline-block; width: 150px">
                        还没有账户? <a href="" th:href="@{/v1/monitoring-system/users/page/register}" class="register-link">注册</a>
                    </div>
                    <div class="text-foot" style="display: inline-block; width: 150px">
                        账户未激活? <a href="" th:href="@{/v1/monitoring-system/users/page/activation}" class="register-link">激活</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div id="footer-div-id"></div>
</div>

<script type="text/javascript">


    window.onload = function (ev) {

        // 自动登入
        if (autoLogin()) {
            window.location.href = PROJECT_BASE_MAPPING_V1 + "/page/index";
            return false;
        }

        // 手动登入

        // 页面初始化
        pageAfterOnloadInit();


        // 添加登录用户名检测事件
        document.getElementById('login-username').onblur = function (ev1) {
            checkUsernameOrEmailAndTip('login-username');
        };

        // 添加登录密码检测事件
        document.getElementById('login-password').onblur = function (ev1) {
            checkPasswordAndTip('login-password');
        };

        // 添加登录按钮事件
        document.getElementById('login-btn').onclick = loginFormSubmitEvent;

    }

</script>

<script type="text/javascript">

    //////////////// function defined ///////////////////////////////

    // 页面初始化
    function pageAfterOnloadInit() {
        // 公共 fragment 初始化
        initUserModelLogoDiv();
        initUserModelFooterDiv();

        var loginUser = getValueFromStoreAnyway(LOGIN_USER_KEY);
        if (!($.isEmptyObject(loginUser))) {
            $("#login-username").val(loginUser.email);
        }
    }

    // 登录表单提交事件
    function loginFormSubmitEvent(ev) {
        if (checkUsernameOrEmailAndTip('login-username') && checkPasswordAndTip('login-password')) {
            // 发送登录请求
            $.ajax({
                url: USER_BASE_MAPPING_V1 + "/login",
                type: "post",
                async: false,
                data: {
                    usernameOrEmail: $("#login-username").val(),
                    password: $("#login-password").val()
                },
                success: function (result, status, xhr) {
                    var obj = JSON.parse(result);
                    var code = obj.code;
                    var message = obj.message;
                    var data = obj.data;
                    if (code !== 200) {
                        kingLayerMsg(message, userDefaultLayerMsgOptions);
                    } else {
                        // 更新 store 中登录用户的激活信息
                        setValueToStore(LOGIN_USER_KEY, data);
                        window.location.href = PROJECT_BASE_MAPPING_V1 + "/page/index";
                    }
                }
            });

        }
        return false;
    }

    // 自动登录
    function autoLogin() {
        var outResult = false;
        var loginUser = getValidValueFromStore(LOGIN_USER_KEY);
        if (!($.isEmptyObject(loginUser))) {
            // 发送自动登录请求
            $.ajax({
                url: USER_BASE_MAPPING_V1 + "/auto-login",
                type: "post",
                async: false,
                data: {
                    id: loginUser.id,
                    gmtCreate: loginUser.gmtCreate,
                    gmtModified: loginUser.gmtModified,
                    username: loginUser.username,
                    email: loginUser.email,
                    phoneNumber: loginUser.phoneNumber,
                    activation: loginUser.activation,
                    role: loginUser.role
                },
                success: function (result, status, xhr) {
                    var obj = JSON.parse(result);
                    var code = obj.code;
                    var message = obj.message;
                    var data = obj.data;
                    if (code === 200) {
                        // 更新 store 中登录用户的信息
                        setValueToStore(LOGIN_USER_KEY, data);
                        outResult = true;
                        console.log("自动登录成功！");
                    } else {
                        console.log("自动登录失败！code：" + code + ", message：" + message);
                    }
                }
            });
        }
        console.log("是否执行了自动登录：" + outResult);
        return outResult;
    }

</script>
</body>
</html>